<template>
  <div class="all">
    <img class="arrow" src="../../../assets/icon/icon_arrow.png" />
    <div :class="strongList.length>1?'all-line':'half-line'"></div>
    <el-card class="statistics-li" @click.native="handleClick">
      <el-row class="statistics-li__strong-row" :gutter="10">
        <el-col :span="24 / strongList.length" v-for="(strongItem, index) in strongList"
                :key="strongItem.label" :class="strongList.length > 1 && index == 0 ? 'line' : ''">
          <el-row class="item">
            <el-col class="item__label" :class="index % 2 != 0?'item__label_r':''">
              <img :src="strongItem.icon" class="iconimg" />
              {{ strongItem.label }}
            </el-col>
            <el-col class="item__num"
                    :class="(index % 2 == 0 && strongList.length>1)?'item__num_l':''">
              <div class="item__num__box">
                <span>{{ strongItem.value }}</span>
              </div>
              <span class="unit">{{ strongItem.unit }}</span>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row class="statistics-li__week-row" :gutter="10">
        <el-col :span="weekItem.label.length > 8 ? 24 : 12"
                v-for="(weekItem, itemIndex) in weekList" :key="weekItem.label">
          <el-row class="item" :class="itemIndex < 2 ? 'b-line' : ''">
            <div class="r-line" v-if="itemIndex % 2 == 0"></div>
            <el-col class="item__label" :class="itemIndex % 2 != 0?'item__label_r':''">
              {{ weekItem.label }}
            </el-col>
            <el-col class="item__num" :class="itemIndex % 2 == 0?'item__num_l':''">
              {{ weekItem.value }} {{ weekItem.unit }}
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'statisticsLi',
  props: {
    strongList: {
      type: Array,
    },
    weekList: {
      type: Array,
    },
  },
  methods: {
    handleClick () {
      this.$emit('click')
    },
  },
}
</script>

<style lang="scss" scoped>
.all {
  display: flex;
  flex-direction: column;
  justify-items: center;
  align-items: center;
  position: relative;
  .arrow {
    width: 20px;
    height: 25px;
    margin-bottom: 30px;
  }
  .all-line {
    position: absolute;
    width: 1px;
    height: 180px;
    left: 325px;
    top: 75px;
    background: #eef0f2;
  }
  .half-line {
    position: absolute;
    width: 1px;
    height: 110px;
    left: 325px;
    top: 142px;
    background: #eef0f2;
  }
}
/deep/ .el-card__body {
  padding: 0;
}
.statistics-li {
  // width: 580px;
  width: 100%;
  height: 180px;
  background: #fff;
  border-radius: 8px;
  padding: 15px;
  font-size: 18px;
  bottom: 0px;
  cursor: pointer;
  margin-left: 35px;
  .statistics-li__week-row {
    .b-line {
      border-bottom: 1px solid #eef0f2;
    }

    .item {
      white-space: nowrap;
      padding: 12px 0;
      position: relative;
      display: flex;
      align-items: center;

      // .r-line {
      //   width: 1px;
      //   height: 100%;
      //   position: absolute;
      //   top: 0;
      //   right: -6px;
      //   background: #eef0f2;
      // }

      .item__label {
        white-space: nowrap;
        font-size: 20px;
        color: #999999;
      }

      .item__num {
        font-size: 24px;
        color: #505050;
        text-align: right;
      }
    }
    .line {
      border-right: 1px solid #e8ecf4;
    }
  }

  .statistics-li__strong-row {
    /deep/ .el-col {
      padding: 0;
    }
    .item {
      display: flex;
      align-items: center;
      padding-top: 0;
      padding-bottom: 10px;
      margin-bottom: 0;
      border-bottom: 1px solid #eef0f2;
      white-space: nowrap;
      // .r-line {
      //   width: 1px;
      //   height: 100%;
      //   position: absolute;
      //   top: 0;
      //   right: -6px;
      //   background: #eef0f2;
      // }
      .item__label {
        font-size: 20px;
        color: #2b2b2b;
        .iconimg {
          width: 40px;
          height: 40px;
        }
      }
      .item__num {
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        .item__num__box {
          height: 40px;
          color: #fff;
          margin-right: 10px;
          padding: 0 15px;
          background: #6fbafe;
          border-radius: 8px;
          display: flex;
          align-items: center;
        }
        .unit {
          font-size: 24px;
        }
      }
    }
  }
  .item__label_r {
    margin-left: 20px !important;
  }

  .item__num_l {
    margin-right: 20px !important;
  }
}
</style>
